import React, { Component } from "react";

/*
  todo this指向问题

  todo 1. 内联地使用bind, 不是很推荐，bind会产生新函数，会增加内存消耗
  todo 2. 在constructor里面调用 this.xxx = this.xxx.bind(this); 比较推荐
  todo 3. 箭头函数，箭头函数的this指向外层, 推荐
*/

class App extends Component {
  constructor() {
    super();
    this.state = {
      count: 3,
    };

    // this.handleClick = this.handleClick.bind(this);
  }

  // handleClick() {
  //   console.log(this.state.count);
  // }

  handleClick = () => {
    console.log(this.state.count);
  };

  render() {
    return (
      <>
        <h2>事件处理-this指向</h2>
        <p>{this.state.count}</p>
        {/* <button onClick={this.handleClick.bind(this)}>btn</button> */}
        <button onClick={this.handleClick}>btn</button>
      </>
    );
  }
}

export default App;
